import { Component } from "react";
import { HashRouter as Router, Route, div, Link,Redirect } from "react-router-dom"
import Home from "./Home"
import Shequ from "./Shequ"
import Cart from "./Cart"
import Self from "./Self"
// import './iconfont.css';
import '../App.css';
// import './mytest.css';


class Tabbar extends Component {
  state = {
    active: "home"
  }
  render() {
    return (
      <Router>
        <div className="Tabbar">
          <div className="TBBody">
            <Route path="/home" exact component={Home}></Route>
            <Route path="/shequ" exact component={Shequ}></Route>
            <Route path="/cart" exact component={Cart}></Route>
            <Route path="/self" exact component={Self}></Route>
            <Redirect to="/home"></Redirect>
          </div>
          <div className="TBTabbar">
            <Link to="/home" className={this.state.active === "home" ? "TabbarOne active" : "TabbarOne"} onClick={this.handleck.bind(this, "home", 1)} >
              <span className="iconfont">&#xe608;</span>
              <p>首页</p>
            </Link>
            <Link to="/shequ" className={this.state.active === "shequ" ? "TabbarOne active" : "TabbarOne"} onClick={this.handleck.bind(this, "shequ", 2)} >
              <span className="iconfont">&#xe600;</span>
              <p>社区</p>
            </Link>
            <Link to="/cart" className={this.state.active === "cart" ? "TabbarOne active" : "TabbarOne"} onClick={this.handleck.bind(this, "cart", 3)} >
              <span className="iconfont">&#xe63e;</span>
              <p>购物车</p>
            </Link>
            <Link to="/self" className={this.state.active === "self" ? "TabbarOne active" : "TabbarOne"} onClick={this.handleck.bind(this, "self", 4)} >
              <span className="iconfont">&#xe656;</span>
              <p>我的</p>
            </Link>
          </div>
        </div>
      </Router>

    );
  }
  handleck = (nowfor, index) => {
    // var alldiv = document.getElementsByClassName('TabbarOne')
    // console.log(alldiv);
    // for (var i = 0; i < alldiv.length; i++) {
    //   alldiv[i].className = {active==""?"TabbarOne active":"TabbarOne"}
    //   // console.log(alldiv[i].className);
    // }
    // var allTB = document.getElementsByClassName('TBBody')
    // console.log(allTB[0]);
    // e.stopPropagation()
    // e.target.className = "activ" + " " + {active==""?"TabbarOne active":"TabbarOne"}
    console.log(index);
    this.setState({
      active: nowfor
    })


  }

  componentDidMount() {
    // console.log(window.location);
    var arr = window.location.hash.split('/')
    // console.log(arr);
    this.setState({
      active: arr[1]
    })
  }
}

export default Tabbar;

